<template>
    <!-- <client-only> -->
    <MainLayout :maxwidth="false" startColor="2">
        <v-breadcrumbs :items="['Foo', 'Bar', 'Fizz']" class="text-4 font-avenir! next-lg py-1!"></v-breadcrumbs>
        <LayoutCol :isMaxWidth="false" :style="{ maxWidth: '1500px' }">
            <Advertisement :images="PageData?.banners ?? []" :btnText="PageData?.advertise_button_title ?? ''"
                :btnLink="PageData?.advertise_button_url ?? ''" :title="PageData?.advertise_start_title ?? ''"
                :content="PageData?.advertise_start_describeribe ?? ''"
                :advertise="PageData?.advertise?.map(l => l.value) ?? []" />
        </LayoutCol>
        <LayoutCol :style="{
            maxWidth: '1500px'
        }" > 
            <Title :content="PageData?.register_describeribe" class="md:px-4 my-4">
                <template #title>
                    <h1 class="text-xl md:text-[32px]">
                        {{ PageData?.register_title }}
                    </h1>
                </template>
                <template #contentBottom>
                    <EvaluateOther :content="PageData?.quotation_describeribe" />
                </template>
            </Title>
            <v-row class="next-lg mx-auto! relative left-50% transform-translate-x-[-44%]">
                <v-col cols="12" sm="12" md="6">
                    <div class="md:px-4 md:pb-13 sticky top-2 md:w-[95%] ml-auto!">
                        <Swiper :list="PageData?.formbanners ?? []" :showBtn="false" showArrow leftTabs
                            :defaultAction="false" />
                        <Title content="" class="my-[20px] bg-white px-4 py-2 md:mt-4">
                            <template #title>
                                <div class="text-[20px]! text-left!">
                                    {{ PageData?.register_left_title }}
                                </div>
                            </template>
                            <template #content>
                                <div class="text-left! mb-2" v-if="PageData?.register_left_describeribe">
                                    {{ PageData?.register_left_describeribe }}
                                </div>
                                <div class="text-left! mb-2" v-if="PageData?.register_left_describeribe_two">
                                    {{ PageData?.register_left_describeribe_two }}
                                </div>
                                <div class="text-left!" v-if="PageData?.register_left_describeribe_three">
                                    {{ PageData?.register_left_describeribe_three }}
                                </div>
                            </template>

                        </Title>
                        <div>
                            <!-- <ul
                class="mt-5 text-[14px] md:text-[15px] text-left! text-black grid! grid-cols-1! md:grid-cols-2! gap-2!"> -->
                            <ul class="mt-5 text-[16px] md:text-[16px] text-left! text-black bg-white px-4 py-2">
                                <li class="list-inside-black mb-1" v-for="item in PageData?.quotation_content ?? []">{{
                                    item.value
                                }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </v-col>
                <v-col cols="12" sm="12" md="6">
                    <ShippingForm :register_title="PageData?.register_right_title"
                        :register_foot_title="PageData?.register_right_foot_title"
                        :register_foot_describeribe="PageData?.register_right_foot_describeribe"
                        :register_foot_email="PageData?.register_right_foot_mail"
                        :register_foot_phone="PageData?.register_right_foot_tel" />
                </v-col>
            </v-row>
        </LayoutCol>
        <LayoutCol class="md:pb-[0px]! md:pt-[0px]!">
            <img :src="PageData?.formfootbanners"
                class="w-full md:w-[120%]! block mx-auto! relative left-50% transform-translate-x-[-50%]" />
        </LayoutCol>
        <LayoutCol :style="{ maxWidth: '1400px!important' }">
            <!--  联系我们 -->
            <div class="w-full ">
                <v-row no-gutters class="text-left">
                    <v-col cols="12" sm="12" md="7">
                        <div class="flex flex-row justify-end!">
                            <img :src="PageData?.contact_us_img?.[0]" class="h-auto" :style="{
                                '--height1': height1 + 'px',
                                width: '90%'
                            }" />
                        </div>
                    </v-col>
                    <v-col cols="12" sm="12" md="5" class="flex justify-center items-center!">
                        <div class="md:px-4" ref="register_right_foot">
                            <v-card class="px-3! py-7! font-avenir! text-center!">
                                <div class="flex mb-2">
                                    <img :src="PageData?.contact_us_thumbnail?.[0]" alt="" srcset=""
                                        class="w-20! h-20! mr-2" />
                                    <div class="text-3 text-gray-600 md:text-[16px]!">
                                        <h1 class="inline-bold text-3 md:text-[16px]!">
                                            {{ PageData?.contact_us_title }}
                                        </h1>
                                        {{ PageData?.contact_us_describeribe }}
                                    </div>
                                </div>

                                <v-btn elevation="0" color="#39c464" class="text-white! w-full! my-2"
                                    :href="PageData?.contact_us_button_describeribe" target="_blank"
                                    v-if="PageData?.contact_us_button_title">
                                    {{ PageData?.contact_us_button_title }}
                                </v-btn>
                                <v-row no-gutters class="text-3! mb-2 md:text-[16px]!">
                                    <v-col cols="6" sm="6">
                                        <div class="flex">
                                            Email:
                                            {{ PageData?.contact_us_email }}
                                        </div>
                                    </v-col>
                                    <v-col cols="6" sm="6" class="text-right">
                                        Call: {{ PageData?.contact_us_call }}
                                    </v-col>
                                </v-row>
                                <v-row no-gutters class="text-3! md:text-[16px]!">
                                    <v-col cols="7" sm="7" class="flex items-center!">
                                        <div class="flex">
                                            Excellent:
                                            <Start />
                                        </div>
                                    </v-col>
                                    <v-col cols="5" sm="5" class="text-right ">
                                        <div class="flex items-center! justify-end!">
                                            4.9 out of 5
                                            <Icons name="icon-trustpilot_"
                                                class="w-[15px] h-[15px] relative -top-[2px] ml-[5px]" />
                                            Turstpilot
                                        </div>
                                    </v-col>
                                </v-row>
                            </v-card>
                            <div class="py-4! hidden md:block"></div>
                            <v-card class="px-3! py-7! font-avenir! text-left!">
                                <div class="flex mb-4!">
                                    <img :src="PageData?.contact_us_foot_img?.[0]" alt="" srcset=""
                                        class="w-30! h-30! mr-2" />
                                    <div class="flex-1 w-0">
                                        <p class="font-bold text-3 md:text-[16px]!  text-gray-600 ">
                                            {{ PageData?.contact_us_foot_title }}
                                        </p>
                                        <p class="text-[15px] text-[#999]">
                                            {{ PageData?.contact_us_foot_describeribe }}
                                        </p>
                                    </div>
                                </div>
                                <v-btn elevation="0" color="#1C498B" class="w-full! font-avenir!"
                                    :href="PageData?.contact_us_foot_button_describeribe" target="_blank"
                                    v-if="PageData?.contact_us_foot_button_title">
                                    {{ PageData?.contact_us_foot_button_title }}
                                </v-btn>
                            </v-card>
                        </div>
                    </v-col>
                </v-row>
            </div>
        </LayoutCol>
        <LayoutCol :style="{
            maxWidth: '1400px!important'
        }">
            <Title :title="PageData?.foot_title" :content="PageData?.foot_describeribe" class="mb-20px">
            </Title>
            <div class="flex flex-row flex-wrap justify-center mb-20px">
                <div class="w-1/2 md:w-1/4 text-center py-2 p-2" :class="{
                    'pr-[6px]': i % 2 !== 0,
                    'pl-[6px]': i % 2 === 0,
                    'md:w-1/5!': 1,
                }" v-for="(item, i) in PageData?.foot_content ?? []">
                    <div class="w-full h-full">
                        <a class="cms-link-wrapper h-full flex flex-col">
                            <div class="cms-img relative w-full">
                                <div class="image-content relative flex items-center justify-center">
                                    <img :src="item.fileList?.[0] || ''" class="w-[30%]!" v-img-auto="'1/1'"
                                        v-hover-pop />
                                </div>
                            </div>
                            <div class="w-[85%]! mx-auto! ">
                                <div class="text-[15px] font-bold mt-10px">{{ item.title }}</div>
                                <div class="text-[15px] text-[#999] mt-2px ">{{ item.value }}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <Title :title="PageData?.evaluate_title" :content="PageData?.evaluate_describeribe">
                <template #contentBottom>
                    <EvaluateOther :content="PageData?.evaluate_total_describeribe" />
                </template>
            </Title>
            <!-- 评论 -->
            <Evaluate :list="PageData?.customizable_skus ?? []" />
        </LayoutCol>
        <LayoutCol>
            <Imgs :num="4" :list="PageData?.patch_display_content ?? []" :imgAuto="false"
                :title="PageData?.patch_display_title" :content="PageData?.patch_display_describeribe" />
            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
                :href="PageData?.patch_display_button_url" target="_blank" v-if="PageData?.patch_display_button_title">
                {{ PageData?.patch_display_button_title }}
            </v-btn>
        </LayoutCol>
        <LayoutCol>
            <Imgs :num="4" :list="PageData?.clothing_patches_content ?? []" :imgAuto="false"
                :title="PageData?.clothing_patches_title" :content="PageData?.clothing_patches_describeribe" />
            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
                :href="PageData?.patch_display_button_url" target="_blank" v-if="PageData?.patch_display_button_title">
                {{ PageData?.patch_display_button_title }}
            </v-btn>
        </LayoutCol>

        <LayoutCol>
            <WallDiagram :title="PageData?.clothing_patches_title" :content="PageData?.quality_describeribe"
                :buttonText="PageData?.quality_button_title" :url="PageData?.qualitybanners?.[0]"
                :pageUrl="PageData?.quality_button_describeribe" />
        </LayoutCol>

        <LayoutCol :style="{ maxWidth: '1400px!important' }">
            <v-row>
                <v-col cols="14" sm="14" md="7">
                    <img :src="PageData?.creativitybanners?.[0] || ''" class="w-[100%] mt-4" />
                </v-col>
                <v-col cols="14" sm="10" md="5" class="flex items-center justify-center">
                    <div class="text-center md:w-[90%]!">
                        <Title :title="PageData?.creativity_title ?? ''">
                            <template #content>
                                {{ PageData?.creativity_describeribe }}
                                <div class="mt-5">
                                    {{ PageData?.creativity_content ?? '' }}
                                </div>
                                <div>
                                    <ul class="mt-5 text-left! ">
                                        <li class=" mb-1" v-for="item in PageData?.creativitys ?? []">
                                            <span class="list-inside-red text-red">
                                                {{ item.value }}
                                            </span>
                                            <div class="text-[12px]">
                                                {{ item.describeribe }}
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </Title>
                        <v-btn elevation="0" color="#1C498B" class="w-full! max-w-[400px]! mt-4 font-avenir!"
                            :href="PageData?.creativitys_button_url" target="_blank"
                            v-if="PageData?.creativitys_button_title">
                            {{ PageData?.creativitys_button_title }}
                        </v-btn>
                    </div>
                </v-col>
            </v-row>
        </LayoutCol>

        <LayoutCol>
            <ImgSwiper :list="PageData?.product_content ?? []" :title="PageData?.product_title"
                :content="PageData?.product_describeribe" :btnText="PageData?.product_button_title"
                :btnUrl="PageData?.product_button_url" typeasdasda="typeasdasda">
                <!-- <Imgs :num="6" :colNum="3" :showContent="false" :imgAuto="'10/9'" /> -->
            </ImgSwiper>
        </LayoutCol>

        <LayoutCol>
            <Imgs :num="4" :list="PageData?.design_content ?? []" :title="PageData?.design_title"
                :content="PageData?.design_describeribe" />

            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
                :href="PageData?.design_button_url" target="_blank" v-if="PageData?.design_button_title">
                {{ PageData?.design_button_title }}
            </v-btn>
        </LayoutCol>

        <LayoutCol>
            <Title :title="PageData?.backing_title" :content="PageData?.backing_describeribe" />
            <ImgSwiper class="mt-4" type="2" :list="PageData?.backing_content ?? []"
                :btnText="PageData?.backing_button_title" :btnUrl="PageData?.backing_button_url">
            </ImgSwiper>
        </LayoutCol>

        <LayoutCol>
            <Imgs :num="8" :colNum="4" :showContent="false" :imgAuto="'10/10'" :list="PageData?.hd_detail_data ?? []"
                :title="PageData?.hd_detail_title" :content="PageData?.hd_detail_describeribe">
                <template #content="{ item }">
                    <p class="text-sm font-bold mt-2">{{ item?.title }}</p>
                </template>
            </Imgs>
            <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
                :href="PageData?.hd_detail_button_url" target="_blank" v-if="PageData?.hd_detail_button_title">
                {{ PageData?.hd_detail_button_title }}
            </v-btn>
        </LayoutCol>

        <LayoutCol>
            <Title :title="PageData?.gallery_end_title" :content="PageData?.gallery_end_describeribe" />
            <Swiper :list="splitIntoPairs(PageData?.gallery_images ?? [], 6)" height="auto" :type="'1'" :showBtn="true"
                :defaultActionTop="true" :defaultAction="false">
                <template #default="{ data }">
                    <Imgs :num="6" :colNum="3" :showContent="false" :imgAuto="'10/9'" :list="data" />
                </template>
            </Swiper>
        </LayoutCol>
        <LayoutCol>
            <Panels :title="PageData?.borders_edges_title" :list="PageData?.question_info_skus ?? []" />
        </LayoutCol>
        <LayoutCol :style="{ maxWidth: '1400px!important' }" v-if="false">
            <div class="w-full ">
                <v-row no-gutters class="text-left">
                    <v-col cols="12" sm="12" md="7">
                        <div class="flex flex-row justify-end!">
                            <img :src="PageData?.help_img?.[0] || ''" class="h-auto!" :style="{
                                width: '90%',
                                '--height2': height2 + 'px',
                            }" />
                        </div>
                    </v-col>
                    <v-col v-if="false" cols="12" sm="12" md="5" class="flex justify-center items-center!">
                        <div class="md:px-4 w-full" ref="register_right_aaaa">
                            <v-card class="px-3! py-3! font-avenir! text-left!" v-if="false">
                                <v-row no-gutters class="text-left">
                                    <v-col cols="12" sm="12" md="5" class="md:pr-4! ">
                                        <img :src="PageData?.help_right_img?.[0] || ''"
                                            class="w-full! mx-auto block mb-2" v-img-auto="'10/10'" />
                                    </v-col>
                                    <v-col cols="12" sm="12" md="7">
                                        <p class="inline-bold text-3 md:text-25px! md:mb-4!">
                                            {{ PageData?.help_title }}
                                        </p>
                                        <p class="text-2 md:text-[12px]! my-2">
                                            {{ PageData?.help_describeribe }}
                                        </p>
                                    </v-col>
                                </v-row>
                                <v-btn elevation="0" color="#39c464" class="w-full! mb-4 font-avenir! text-white"
                                    :href="PageData?.help_button_url" target="_blank"
                                    v-if="PageData?.help_button_title">
                                    {{ PageData?.help_button_title }}
                                </v-btn>
                                <v-row no-gutters class="text-3! md:text-[12px]! mb-2 font-avenir!">
                                    <v-col cols="7" sm="7">
                                        Email: {{ PageData?.help_domian }}
                                    </v-col>
                                    <v-col cols="5" sm="5" class="text-right">
                                        Call: {{ PageData?.help_call }}
                                    </v-col>
                                </v-row>
                            </v-card>
                        </div>
                    </v-col>
                </v-row>
            </div>
        </LayoutCol>
    </MainLayout>
</template>

<script setup lang="ts">
import { Title } from '~/components/Title/index'
import { Swiper } from '~/components/swiper/index'
import ImgSwiper from '~/components/swiper/imgSwiper.vue'
import { Evaluate } from '~/components/evaluate'
import { WallDiagram } from '~/components/wallDiagram'
import { Panels } from '~/components/panels'
import { Advertisement } from '~/components/Advertisement'
import EvaluateOther from '~/components/evaluate/evaluateOther.vue'
import Imgs from '~/components/swiper/imgs.vue'
import { ShippingForm } from '~/components/ShippingForm'
import { MainLayout } from '~/components/MainLayout'
import LayoutCol from '~/components/MainLayout/layoutCol.vue'
import { getNewProjuctinfo } from '~/composables/api/new_projuct'
import { useRoute } from 'vue-router'
import { Start } from '~/components/start'
import { Icons } from '~/components/icons'
const route = useRoute();
console.log('route.query', route.params);
console.log('route.query.id', route.params.id);
const relustData = await getNewProjuctinfo(route.params.id as string);
const PageData = ref(relustData.value?.page_data);
console.log('relustDatarelustData', relustData.value);
const register_right_foot = ref();
const register_right_aaaa = ref();
const height1 = ref(0);
const height2 = ref(0);
useHead({
    title: relustData.value?.title, // 页面标题
    // 还可以配置其他元信息（如描述、关键词等）
    meta: [
        { name: relustData.value?.keywords, content: relustData.value?.describe },
    ]
})
watchEffect(() => {
    height1.value = register_right_foot.value?.clientHeight;
    height2.value = register_right_aaaa.value?.clientHeight;
    console.log('register_right_foot', register_right_foot.value);
})
// onMounted(() => {
//     nextTick(() => {
//         setTimeout(() => {
//             height1.value = register_right_foot.value?.clientHeight;
//             height2.value = register_right_aaaa.value?.clientHeight;
//         }, 1000);
//     })
// })
</script>

<style lang="scss" scoped>
:deep(.v-filed-active) {
    border: none !important;
}

:deep(.v-img__img--contain) {
    object-fit: none !important;
}

.decoration-dotted {
    text-decoration: line-through;
}
</style>